<template>
  <a-card title="审核信息填写" :bordered="false">
    <a-form
      :model="formState"
      :rules="rules"
      ref="formRef"
      layout="vertical"
    >
      <a-row :gutter="24">
        <a-col :span="8">
          <a-form-item label="用户名称" name="username">
            <a-input v-model:value="formState.username" placeholder="请输入用户名称" />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="用户手机号" name="userMobile">
            <a-input v-model:value="formState.userMobile" placeholder="用户接收短信手机号" />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="订单号" name="orderID">
            <a-input v-model:value="formState.orderID" placeholder="请输入订单号" />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :span="8">
          <a-form-item label="店铺名称" name="shopName">
            <a-input v-model:value="formState.shopName" placeholder="请输入店铺名称" />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="审核人员微信" name="weChat">
            <a-input v-model:value="formState.weChat" placeholder="请输入审核人员微信" />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="审核人员名称" name="auditor">
            <a-input v-model:value="formState.auditor" placeholder="请输入审核人员名称" />
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>

    <!-- 短信预览 -->
    <a-card title="短信内容预览" style="margin-top: 20px">
      <div class="sms-preview">
        <p>{{ smsContent }}</p>
      </div>
    </a-card>

    <!-- 操作按钮 -->
    <div style="margin-top: 24px; text-align: center">
      <a-button type="primary" @click="handleSubmit" :loading="loading">发送短信并保存</a-button>
    </div>
    <a-divider />
    <!-- 搜索框 -->
    <a-card title="搜索条件" :bordered="false">
      <a-form
          :model="formSelect"
          layout="vertical"
        >
          <a-row :gutter="24">
            <a-col :span="8">
              <a-form-item label="用户名称" name="username">
                <a-input v-model:value="formSelect.username" placeholder="请输入用户名称" />
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="订单号" name="orderID">
                <a-input v-model:value="formSelect.orderID" placeholder="请输入订单号" />
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="店铺名称" name="shopName">
                <a-input v-model:value="formSelect.shopName" placeholder="请输入店铺名称" />
              </a-form-item>
            </a-col>
          </a-row>

          <a-row :gutter="24">
            <a-col :span="8">
              <a-form-item label="审核人员名称" name="auditor">
                <a-input v-model:value="formSelect.auditor" placeholder="请输入审核人员名称" />
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="操作">
                <a-button type="primary" @click="handleSearch">搜索</a-button>
                <a-button style="margin-left: 8px" @click="resetFormSelect">重置</a-button>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
    </a-card>

    <!-- 发送记录 -->
    <a-divider />
    <a-card title="发送记录">
      <a-table
        :columns="columns"
        :dataSource="records"
        :pagination="false"
        rowKey="id"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'action'">
            <a-button type="link" @click="showDetail(record)">查看详情</a-button>
          </template>
        </template>
      </a-table>
    </a-card>

    <!-- 详情模态框 -->
    <a-modal
      v-model:open="detailVisible"
      title="短信详情"
      width="600px"
      :footer="null"
    >
      <a-descriptions bordered :column="1">
        <a-descriptions-item label="用户名称">{{ currentRecord.username }}</a-descriptions-item>
        <a-descriptions-item label="用户手机号">{{ currentRecord.userMobile }}</a-descriptions-item>
        <a-descriptions-item label="订单号">{{ currentRecord.orderID }}</a-descriptions-item>
        <a-descriptions-item label="店铺名称">{{ currentRecord.shopName }}</a-descriptions-item>
        <a-descriptions-item label="审核人员微信">{{ currentRecord.weChat }}</a-descriptions-item>
        <a-descriptions-item label="审核人员">{{ currentRecord.auditor }}</a-descriptions-item>
        <a-descriptions-item label="短信内容">
          <p style="white-space: pre-line">{{ currentRecord.smsContent }}</p>
        </a-descriptions-item>
        <a-descriptions-item label="发送时间">{{ currentRecord.createdAt }}</a-descriptions-item>
      </a-descriptions>
    </a-modal>
  </a-card>
</template>

<script setup>
import { ref, computed, reactive , onMounted } from 'vue';
import { message } from 'ant-design-vue';
import { createSms, getSmsList } from '@/api/tool';
import moment from 'moment';

const formRef = ref();
const loading = ref(false);
const detailVisible = ref(false);
const currentRecord = ref({});

const formState = reactive({
  username: '',
  userMobile: '',
  orderID: '',
  shopName: '',
  weChat: '',
  auditor: '',
  smsContent: ''
});

const formSelect = reactive({
  pageIndex: 1,
  pageSize: 10,
  username: '',
  orderID: '',
  shopName: '',
  auditor: ''
});

  const validateMobile = (_, value) => {
    if (!value) {
      return Promise.reject(new Error('请输入用户手机号'));
    }
    // 验证手机号格式
    const phoneRegex = /^1[3-9]\d{9}$/; // 简单的中国大陆手机号正则表达式
    if (!phoneRegex.test(value)) {
      return Promise.reject(new Error('请输入有效的手机号'));
    }
    return Promise.resolve();
  };


const rules = {
  username: [{ required: true, message: '请输入用户名称', trigger: 'blur' }],
  userMobile: [{ required: true, message: '请输入用户手机号', trigger: 'blur' }, { validator: validateMobile, trigger: 'blur' }],
  orderID: [{ required: true, message: '请输入订单号', trigger: 'blur' }],
  shopName: [{ required: true, message: '请输入店铺名称', trigger: 'blur' }],
  weChat: [{ required: true, message: '请输入审核人员微信', trigger: 'blur' }],
  auditor: [{ required: true, message: '请输入审核人员名称', trigger: 'blur' }]
};

// 计算短信内容
const smsContent = computed(() => {
  return `尊敬的${formState.username}，您在${formState.shopName}的租赁订单即将进入审核流程，订单号为${formState.orderID}，请留意客服电话，如有疑问，请拨打客服电话${formState.weChat}`;
});

// 发送记录
const records = ref([]);

const columns = [
  {
    title: '用户名称',
    dataIndex: 'username',
    key: 'username'
  },
  {
    title: '用户手机号',
    dataIndex: 'userMobile',
    key: 'userMobile'
  },
  {
    title: '订单号',
    dataIndex: 'orderID',
    key: 'orderID'
  },
  {
    title: '审核员信息',
    dataIndex: 'auditor',
    key: 'auditor'
  },
  {
    title: '店铺名称',
    dataIndex: 'shopName',
    key: 'shopName'
  },
  {
    title: '发送时间',
    dataIndex: 'createTime',
    key: 'createTime',
    customRender: (text) => {
      return moment(text.text).format('YYYY-MM-DD HH:mm:ss');
    }
  },
  {
    title: '操作',
    key: 'action'
  }
];

const handleSubmit = () => {
  formRef.value.validate().then(async() => {
    loading.value = true;
    formState.smsContent = smsContent.value;
    // 模拟API调用
    const {code, msg} = await createSms(formState);
    if (code === "200") {
      message.success(msg);
      // 重置表单
      formRef.value.resetFields();
      loading.value = false;
      // 刷新列表
      getList(formSelect);
    } else {
      message.error(msg);
    }
  }).catch(() => {
    message.error('请填写完整信息');
  });
};

//重置搜索条件
const resetFormSelect = () => {
  formSelect.username = '';
  formSelect.orderID = '';
  formSelect.shopName = '';
  formSelect.auditor = '';
};

//根据搜索框获取短信发送列表
const handleSearch = () => {
  getList(formSelect)
}

//获取短信发送列表
const getList = async(params) => {
 const {code, msg, data} = await getSmsList(params);
 if(code === "200") {
    console.log("打印返回数据",data);
    records.value = data.data;
 } else {
    message.error(msg);
 }
}

onMounted(() =>{
  getList(formSelect);
});
const showDetail = (record) => {
  currentRecord.value = record;
  detailVisible.value = true;
};
</script>

<style scoped>
.sms-preview {
  padding: 16px;
  background: #f5f5f5;
  border-radius: 4px;
  white-space: pre-line;
  line-height: 1.6;
}
.search-header {
  padding: 16px;
  background: #fff;
  margin-bottom: 16px;
}
</style>